import React, { Fragment, PureComponent } from 'react'
import { View, Text, StyleSheet, ScrollView } from 'react-native'
import PropTypes from 'prop-types'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import { ONE_PIXEL } from '@/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'

export default class LabelList extends PureComponent {
  static propTypes = {
    cardList: PropTypes.array,
    homeIndustryClick: PropTypes.func
  }

  render () {
    const { cardList } = this.props
    return (
      <ScrollView
        style={styles.container}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
      >
        <View style={styles.scrollContainer}>
          {cardList.map((item, index) => this._cardItem({ item, index }))}
        </View>
      </ScrollView>
    )
  }

  _cardItem = ({ item, index }) => {
    return (
      <CustomButton key={index} style={styles.card} params={item} onPress={this._homeIndustryClick}>
        <Text style={styles.cardText}>{item.category}</Text>
      </CustomButton>
    )
  }

  _homeIndustryClick = (item) => {
    const { category, type } = item
    this.props.homeIndustryClick({ category: category || '全部', type: type || 0 })
  }
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    paddingHorizontal: ScaleS(20)
  },
  scrollContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingRight: ScaleS(20)
  },
  card: {
    width: ScaleS(70),
    height: ScaleS(36),
    borderRadius: ScaleS(18),
    borderColor: '#DDDDDD',
    borderWidth: ONE_PIXEL,
    borderStyle: 'solid',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: ScaleS(15)
  },
  cardText: {
    fontSize: ScaleT(11),
    color: '#3C3C3C',
    fontWeight: '500'
  }
})
